<template>
      <div class="bg-black">
           <div class="constraint cations-up">
                  <div class="flex">
                        <div class="cations-btn-box of_hidden flex-1 flex ali-center mobile-dis">
                              <ul>
                                    <li :class="['flex ali-center cations-cab' ,{'cations_active' : index == data.communicationIndex}]" v-for="(item, index) in 3" :key="index" @mouseenter="getCommunicationMouseChange(index)">
                                          <div>
                                                <h3>操作按钮{{ index }}</h3>
                                                <p>我是辅助文字</p>
                                          </div>
                                    </li>
                              </ul>
                        </div>
                        <div class="cations-vd-box flex-1">
                              <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
                        </div>
                  </div>
           </div>
      </div>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'

let data = reactive({
      communicationIndex: 0
})

let getCommunicationMouseChange = (e: number) => {
      data.communicationIndex = e
}
</script>